// minicssex...是将css单独提取出来作为一个文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');

module.exports = {
  // context设置当前webpack的路径 例如这里写了 ../part2 就是把part2作为这个webpack的根路径
  // 那么要访问index.ejs 就需要相对这个路径去找 也就是 ../index.ejs
  // 如果context不设置 那么就是默认package.json的位置为根路径
  // context: resolve(__dirname, '../part2'),
  entry: './part3/module1homework/snabbdom/index.js',
  resolve: {
    alias: {
      '@': resolve('../src/')
    },
    extensions: ['.ts', '.js', '.jsx', '.tsx'],
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      },
      {
        test: /\.tsx?$/,
        use: ['babel-loader', 'awesome-typescript-loader'],
      },
      {
        test: /\.ts$/,
        use: ['babel-loader', 'awesome-typescript-loader'],
        exclude: /node_modules/,
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          // url-loader 会把图片等静态资源变成base64存在js文件中 但是这回造成js文件过大 如果静态资源的文件过大 会导致页面显示特别慢
          // file-loader 则不会
          loader: 'url-loader',
          options: {
            // 原理就是placeholder 占位符
            name: '[name]_[hash].[ext]', // 意思是 图片的名字和后缀都不变
            outputPath: 'images/',
            limit: 2048 // 如果文件大于2048字节 则单独打包成文件 否则为base64
          }
        }
      },
      {
        test: /\.css$/,
        // css-loader 分析css之间的关系 比如@import引入其他css
        // style-loader 把解析完之后的css挂载到head标签里
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
      },
      {
        test: /\.scss$/,
        // webpack中loader的执行顺序是从下到上 从右到左
        // 所以要打包scss的时候先用 sassloader 翻译成css
        // 再用css-loader编译成一个 再防到head中
        use: [
          // 'style-loader',
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2, // 意思是通过import引入的样式文件在引入之前也要去使用postcss-loader以及sass-loader
              modules: true, // 使用css模块化打包
            }
          },
          'sass-loader',
          'postcss-loader'
        ]
      },
      {
        test: /\.md$/,
        use: ['html-loader', './md-loader.js']
      }
    ]
  },
  plugins: [
    // 用于生产index.html
    new HtmlWebpackPlugin({
      // filename: 'index.html', // 设置文件名 默认index.html
      title: 'plugin的title',
      meta: {},
      template: './index.ejs'
    }),
    new MiniCssExtractPlugin()
  ]
}